<route lang="json5" type="page">
  {
    style: {
      navigationBarTitleText: '调转记录',
    },
    anonymous: false
  }
</route>

<script lang="ts" setup>
import ClassChangeItem from './components/ClassChangeItem.vue'
import { ClassApi } from '@/apis'
import { useUserStore } from '@/stores'

const userStore = useUserStore()

// 搜索表单
const query = reactive<ClassApi.EnrollClassQuery>({
  studentId: userStore.currentStudent.id,
})

const { reload, loading, loadmore, records, status, contentText } = usePagination(page => ClassApi.getChangeRecordPage({ ...query, ...page }))
onReachBottom(() => {
  loadmore()
})

const toCourse = () => {
  uni.switchTab({
    url: '/pages/course/index',
  })
}

// const { loading, data } = useRequest(getList)
</script>

<template>
  <view v-if="loading" class="flex-row-center-center bg-white page">
    <wd-loading color="#33AD7C" />
  </view>
  <template v-else>
    <view class="content px py">
      <view v-for="(item, index) in records" :key="index" class="mt-[24rpx]" :style="index === 0 ? 'margin-top:0' : ''">
        <ClassChangeItem :data="item" @onRevokeSuccess="reload"/>
      </view>
      <view v-if="!records.length">
        <wd-status-tip image="content" tip="暂无内容" />
      </view>
    </view>

    <!-- <view class="footer">
      <view class="px-[30rpx] py-[12rpx]">
        <wd-button block type="success" :round="false" @click="toCourse">新增</wd-button>
      </view>
    </view> -->
  </template>
</template>

<style lang="scss" scoped>
  .content {
    height: calc(100vh - 160rpx) !important;
    overflow: scroll;
  }

  .footer {
    position: fixed;
    left: 0px;
    bottom: 0px;

    height: 160rpx;
    width: 100%;
    background: white;
    box-shadow: 0px -4px 4px 0px #0000000D;

  }
</style>
